<template>
	<div>
		<div class="heade">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rock音乐</div>
		
		<div id="bye">
		<mt-swipe :auto="4000">
			  <mt-swipe-item  v-for="(ban,i) in banners" :key="i">
			  		<img :src="ban.picUrl"/>
			  </mt-swipe-item>
		</mt-swipe>
		</div>
		
	    <div class="tiao">
	    	<router-link to="/hello" >推荐</router-link>
	    </div>
	    <div class="tiao">
	    	<router-link  to="/regebang" >热歌榜</router-link>
	    </div>
	    <div class="tiao">
	    	<router-link  to="/bye" >搜索</router-link>
	    </div>
    <router-view></router-view>
	</div>
	
</template>

<script>
	import axios from "axios";
	//输出
	export default{
		mounted(){
			//请求轮播
			axios.get("http://netease.bluej.cn/banner").then( (res)=>{
				console.log(res);
				this.banners=res.data.banners;
			} )
		},
		data(){
			return {
				banners:[]
			}
		}
	}
</script>

<style>
	#bye{
			.mint-swipe{
			height: 46vw;
		}
		img{
			width: 100%;
		}
	}
	.heade{
		width: 100%;
		height: 20vw;
		line-height: 20vw;
		background: #D43C33;
		text-align: left;
		color: white;
		font-size: 23px;
		/*padding-left: 50px;*/
	}
	.tiao{
		width: 33.3%;
		height: 10vw;
		line-height: 10vw;
		display: inline-block;
		text-align: center;
		border-bottom: 1px solid #f1f1f1;
	}
.router-link-active{
		color: red;
		border-bottom: 2px solid red;
	}

</style>